<template>
  <!-- 订单管理页 -->
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="所有订单" />
      <el-tab-pane label="待支付" name="待支付" />
      <el-tab-pane label="待派单" name="待派单" />
      <el-tab-pane label="待接单" name="待接单" />
      <el-tab-pane label="待服务" name="待服务" />
      <el-tab-pane label="待确认" name="待确认" />
      <el-tab-pane label="已完成" name="已完成" />
    </el-tabs>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="120" />
      <el-table-column prop="orderTime" label="下单时间" width="300">
        <template slot-scope="scope"
          >{{ scope.row.orderTime | filteTime }}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总价" width="250">
        <template slot-scope="scope"
          >￥ <span style="color: red"> {{ scope.row.total }}</span> 元
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '待接单'" type="danger"
            >{{ scope.row.status }}
          </el-tag>
          <el-tag v-else-if="scope.row.status == '待派单'" type="info"
            >{{ scope.row.status }}
          </el-tag>
          <el-tag v-else-if="scope.row.status == '待服务'" type="warning"
            >{{ scope.row.status }}
          </el-tag>
          <el-tag v-else type="success">{{ scope.row.status }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" width="120" />
      <el-table-column
        v-if="activeName !== '待派单'"
        prop="employeeId"
        label="员工ID"
        width="120"
      />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="toDetails(scope.row.id)"
            >详情</el-button
          >
          <el-button
            v-if="scope.row.status === '待派单'"
            type="success"
            size="mini"
            @click="sendOrder(scope.row.id)"
            >派单</el-button
          >
          <el-button
            v-if="scope.row.status === '待接单'"
            type="danger"
            size="mini"
            @click="cancelSendOrder(scope.row.id)"
            >取消派单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-div">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="派单" :visible.sync="visible">
      <el-radio
        v-for="(item, index) in empolyee"
        :key="index"
        v-model="form"
        class="radio"
        border
        :label="item.id"
      >
        {{ item.username }}
        {{ item.realname }}
      </el-radio>

      <div slot="footer" class="dialog-footer">
        <el-button @click="toCancel">取 消</el-button>
        <el-button type="primary" @click="toSendOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Moment from "moment";
import {
  pageQuery,
  cancelSendOrder,
  sendOrder,
  pageQueryPro,
} from "@/api/order";
export default {
  filters: {
    filteTime(v) {
      return Moment(v).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  data() {
    return {
      activeName: "所有订单",
      // 表格展示的数据
      tableData: [],
      // 分页参数
      params: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      // 加载
      loading: false,
      empolyee: {},
      form: "",
      visible: false,
      myorderId: "",
    };
  },
  computed: {},
  watch: {
    params: {
      handler() {
        this.pageQuery();
      },
      deep: true,
    },
  },
  created() {
    this.pageQuery();
  },
  mounted() {},
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
      this.pageQuery();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.params.page = 1;
      this.params.pageSize = val;
    },
    handleCurrentChange(val) {
      this.params.page = val;
    },
    async pageQuery() {
      this.loading = true;
      if (this.activeName === "所有订单") {
        var b = "";
      } else {
        b = this.activeName;
      }
      const temp = {
        ...this.params,
        status: b,
      };
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      const res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.params.total = res.data.total;
      this.loading = false;
    },
    toDetails(id) {
      this.$router.push({
        path: "/admin/order/Details",
        query: {
          index: id,
        },
      });
    },
    sendOrder(id) {
      this.visible = true;
      this.myorderId = id;
      this.pageQueryPro();
    },
    toCancel() {
      this.form = {};
      this.visible = false;
    },
    async pageQueryPro() {
      const res = await pageQueryPro({ page: 1, pageSize: 10, roleId: 1 });
      this.empolyee = res.data.list;
    },
    async toSendOrder() {
      const res = await sendOrder({
        orderId: this.myorderId,
        waiterId: this.form,
      });
      this.$notify.success({
        title: "成功",
        message: res.message,
      });
      this.visible = false;
      this.form = {};
      this.pageQuery();
    },
    async cancelSendOrder(id) {
      const res = await cancelSendOrder({ orderId: id });
      this.$notify.success({
        title: "成功",
        message: res.message,
      });
      this.pageQuery();
    },
  },
};
</script>
<style scoped>
.radio {
  margin: 5px;
}
</style>
